<template>
    <div class="order">
        <div class="order-nav">
            <navigation :content='navContent' :parentWidth='navWidth'></navigation>
        </div>
        <div class="order-nav-content">
            <swiper :options="swiperOption" ref="mySwiper" >
                <swiper-slide :style="{height:swiperHeight+'rem'}">
                    <all></all>
                </swiper-slide>
                <swiper-slide :style="{height:swiperHeight+'rem'}">
                    <wait-payment></wait-payment>
                </swiper-slide>
                <swiper-slide :style="{height:swiperHeight+'rem'}">
                    <wait-deliver></wait-deliver>
                </swiper-slide>
                <swiper-slide :style="{height:swiperHeight+'rem'}">
                    <wait-goods></wait-goods>
                </swiper-slide>
                <swiper-slide :style="{height:swiperHeight+'rem'}">
                    <wait-comment></wait-comment>
                </swiper-slide>
            </swiper>
        </div>
    </div>
</template>

<script>
import navigation from '../../public/nav'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import virtualData from './virtual'

import all from './all'
import waitPayment from './waitPayment'
import waitDeliver from './waitDeliver'
import waitGoods from './waitGoods'
import waitComment from './waitComment'

export default {
    name:'order',
    data(){
        return {
            navContent:['全部','待付款','待发货','待收货','待评价'],
            navWidth:734,
            swiperHeight:0,
            virtual:virtualData,
            swiperOption: {
                initialSlide:0,
                direction:'horizontal',
                loop: false,
                speed:300,
                autoHeight:true,
                on:{
                    slideChangeTransitionStart:() => {
                        let realIndex = this.swiperDetail;
                        this.$store.state.homeTabIndex = realIndex;
                        console.log(realIndex);
                    }
                }
            },
            allStore:[]
        }
    },
    methods:{

    },
    mounted(){
        let scale = window.devicePixelRatio;
        this.swiperHeight = document.documentElement.clientHeight*scale/100;
        this.$store.state.tab = '我的订单';
    },
    activated(){
        this.$store.state.tab = '我的订单';
    },
    computed:{
        swiperDetail() {
            return this.$refs.mySwiper.swiper.realIndex;
        },
        nowPage(){
            return this.$store.state;
        }
    },
    components:{
        navigation,
        swiper,
        swiperSlide,
        all,
        waitPayment,
        waitDeliver,
        waitGoods,
        waitComment
    }
}
</script>

<style lang='less'>
@rem:100rem;

.order{
    width: 100%;
    margin-top: 88/@rem;
    .order-nav{
        width: 100%;
        box-sizing: border-box;
        padding: 0 8/@rem;
        background: #ffffff;
        position: fixed;
        left: 0;
        top: 88/@rem;
        z-index: 99;
        .swiper-wrapper{
            height: auto !important;
        }
        .swiper-slide{
            height: auto;
        }
    }
}
</style>
